<template>
  <div class="fx-menu-item" :style="menuItemStyle" :class="{active:activeItemMenu}" @click="menuItemClick">
    <div class="title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="content">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, PropType, Ref } from 'vue'
import { MenuMitt } from '@/base/menu/menuTypes'
import { MenuProvideStyle } from '@/base/menu/menu.vue'

interface MenuItemProps {
  title: string,
  index: string
}

export default defineComponent({
  name: 'menuItem',
  props: {
    title: {
      type: String as PropType<string>,
      default: ''
    },
    index: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup (props: MenuItemProps) {
    const defaultActive = inject<Ref<string> | undefined>('defaultActive', undefined)
    const menuMittEmit = inject<MenuMitt>('menuMitt')
    const menuStyle = inject<Ref<MenuProvideStyle> | undefined>('menuStyle', undefined)

    // 当前选中
    const activeItemMenu = computed(() => {
      return props.index === defaultActive?.value
    })
    // 子菜单样式
    const menuItemStyle = computed(() => {
      if (!menuStyle?.value || !defaultActive?.value) return
      const style = menuStyle.value
      const active = props.index === defaultActive.value
      return {
        color: active ? style.textActiveColor : style.textColor,
        backgroundColor: active ? style.activeBackgroundColor : style.backgroundColor
      }
    })

    const menuItemClick = (): void => {
      if (!menuMittEmit?.menuMittEmit) return
      menuMittEmit.menuMittEmit('menuItemClick', props.index)
    }

    return {
      defaultActive,
      menuItemStyle,
      activeItemMenu,
      menuItemClick
    }
  }
})
</script>
